<template>
    
    <!-- header -->
    <Header></Header>
    <!-- nav -->
    <Nav></Nav>
    <div class="box box-height">

        <div class="login-box personal-nav">
            <ul class="nav nav-tabs ul100" role="tablist">
                <li v-for="(project,index) in projects" role="presentation" :class="project.id == project_id ? 'active' : ''"  :key="index"><a :href="'/web/talent/course_list/' + project.id">{{ project.title }}</a></li>
            </ul>
            <div class="tab-content login-form">

                <div class="">
                    <!-- fillter list -->
                    <div class="fillter-box">
                        <div class="fillter">
                            <span class="fillter-title">分类：</span>
                            <div class="fillter-lable">
                                <!-- Nav tabs -->
                                <ul class="nav nav-tabs" role="tablist">
                                    <li class="type" :class="search.type == '全部' ? 'active' : ''" data-value="全部" role="presentation"><a href="#" role="tab" data-toggle="tab" @click="searchType('全部')">全部</a></li>
                                    <li v-for="(type,index) in types"  :key="index" class="type" :class="search.type == type.name ? 'active' : ''" data-value="{{ $type->name }}" role="presentation"><a href="#" role="tab" data-toggle="tab" @click="searchType(type.name)">{{ type.name }}</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="fillter">
                            <span class="fillter-title">状态：</span>
                            <div class="fillter-lable">
                                <!-- Nav tabs -->
                                <ul class="nav nav-tabs" role="tablist">
                                    <li class="learn" :class="search.learn == '全部' ? 'active' : ''" data-value="全部" role="presentation"><a href="" role="tab" data-toggle="tab" @click="searchLearn('全部')">全部</a></li>
                                    <li class="learn" :class="search.learn == '已学完' ? 'active' : ''" data-value="已学完" role="presentation"><a href="" role="tab" data-toggle="tab" @click="searchLearn('已学完')">已学完</a></li>
                                    <li class="learn" :class="search.learn == '未学完' ? 'active' : ''" data-value="未学完" role="presentation"><a href="" role="tab" data-toggle="tab" @click="searchLearn('未学完')">未学完</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="fillter-search">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="请输入课程标题" ref="search">
                                <span class="input-group-btn">
                                <button class="btn btn-primary" type="button"  @click="searchName()">搜索</button>
                        </span>
                            </div>
                        </div>
                    </div>
                    <!-- video list -->
                    <ul class="home-video clearfix list-unstyled">
                        <li v-for="(video,index) in videos"  :key="index">
                            <a :href="'/web/talent/course_detail/' + video.hash_id">
                                <img :src="'http://static.tcmcme.cn/' + video.cover" alt="">
                                <span>
                                    <i v-if="userId > 0 && video.is_standard == 1" class="xuefen-label">已学完</i>
                                    {{ video.name }} - {{ video.speaker }}
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>    

    <!-- foot -->
    <Footer></Footer>
</template>
<script>
import Header from "../../../components/web/Header";
import Nav from "../../../components/web/Nav";
import Footer from "../../../components/web/Footer";
export default {
    name: "CourseList",
    components:{
        Header,
        Nav,
        Footer
    },
    setup(){
    // let store = useStore();
    // let cart = computed(() => {
    //   return store.state.cart
    // })

    // return {
    //   cart
    // }
    },
    data() {
        return {
            projects: [],
            videos: [],
            project_id: 0,
            search: [],
            userId: 0,
            types: []
        }
    },
    methods: {
        searchType (type) {
            this.search.type = type;
            this.searchProjects ();
        },
        searchLearn (learn) {
            this.search.learn = learn;
            this.searchProjects ();
        },
        searchName () {
            this.search.search = this.$refs.search.value;
            this.searchProjects ();
        },
        async searchProjects () {
            
            let params = this.$route.params;
            let url = '/scanapi/api/v1/web/talent/course_list/' + params.project_id;
            let datas = this.search;
            let others = {
                headers: {
                    accessToken: 'A4D3F61A-F152-482E-9DC9-B7D14F682D7D',
                    projectId2: "A4D3F61A-F152-482E-9DC9-B7D14F682D7D",
                },
            };
            // const items = await this.$http.post('/api/banner')
            
            const res = await this.$http.post(url, datas, others)
            console.log(res);
            
            this.projects = res.data.projects;
            this.videos = res.data.videos;
            this.project_id = res.data.project_id;
            this.search = res.data.search;
            this.userId = res.data.userId;
            this.types = res.data.types;
        }
    },
    async created(){
        try{
            this.searchProjects ();
        }catch(err){
            console.log(err)
        }
    }
}
</script>